import { Button, Tree, Card, Pagination, Table, Row, Col, message } from "antd";
import type { ColumnsType } from "antd/es/table";
import type { DataNode } from "antd/es/tree";
import { useNavigate, useParams } from "react-router-dom";
import { Children, useEffect, useState } from "react";
import {
  getDepartmentInfo,
  getScheduleRule,
  getFindScheduleList,
  getBaseHospitalInfo,
} from "@/api/hospital/hospitalList";
import {
  DepartmentList,
  DepartmentItem,
  BookingScheduleList,
  DoctorList,
  DoctorItem,
} from "@/api/hospital/hospitalList/model/types";
import { workerData } from "worker_threads";
export default function Schedule() {
  const navigate = useNavigate();

  const params = useParams();
  const { id } = params;

  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(5);
  const [depcode, setDepcode] = useState("");
  const [total, setTotal] = useState(0);

  const [hosname, setHosname] = useState("");
  const [department, setDepartment] = useState("");
  const [date, setDate] = useState("");

  const [bookingScheduleList, setBookingScheduleList] =
    useState<BookingScheduleList>([]);

  const [departmentList, setDepartmentList] = useState<DepartmentList>([]);

  const [doctor, setDoctor] = useState<DoctorList>([]);

  //获取排班左边树状图数据
  const getDepartmentInfoFun = async () => {
    const res = await getDepartmentInfo(id as string);
    setDepartmentList(
      res.map((item: DepartmentItem) => {
        return {
          disabled: true,
          key: item.depcode,
          title: item.depname,
          children: item.children.map((value) => {
            return {
              disabled: false,
              key: value.depcode,
              title: value.depname,
            };
          }),
        };
      })
    );

    setDepcode(res[0]?.children[0]?.depcode);
    setDepartment(res[0]?.children[0]?.depname);
    getScheduleRuleFun(
      page,
      pageSize,
      id as string,
      res[0]?.children[0]?.depcode
    );
  };

  //获取门诊时间数据
  const getScheduleRuleFun = async (
    page: number,
    pageSize: number,
    id: string,
    depcode: string
  ) => {
    const res = await getScheduleRule(page, pageSize, id, depcode);
    setTotal(res.total);
    setBookingScheduleList(res.bookingScheduleList);
    setDate(res.bookingScheduleList[0]?.workDate);
    setHosname(res.baseMap.hosname);
    if (!res.bookingScheduleList.length) {
      message.error("暂无数据");
      setDoctor([]);
      return;
    }

    getFindScheduleListFun(
      id as string,
      depcode,
      res.bookingScheduleList[0].workDate
    );
  };

  //获取详细排班医生列表
  const getFindScheduleListFun = async (
    id: string,
    depcode: string,
    workDate: string
  ) => {
    const res = await getFindScheduleList(id, depcode, workDate);
    setDoctor(res);
  };

  useEffect(() => {
    getDepartmentInfoFun();
  }, []);

  const columns: ColumnsType<DoctorItem> = [
    {
      title: "序号",
      render: (text, _, index) => <a>{index + 1}</a>,
    },
    {
      title: "职称",
      dataIndex: "title",
    },
    {
      title: "号源时间",
      dataIndex: "workDate",
    },
    {
      title: "可预约数",
      dataIndex: "reservedNumber",
    },
    {
      title: "剩余预约数",
      dataIndex: "availableNumber",
    },
    {
      title: "挂号费(元)",
      dataIndex: "amount",
    },
    {
      title: "擅长技能",
      dataIndex: "skill",
    },
  ];

  const data: DoctorItem[] = doctor;

  return (
    <>
      <Card>
        <div>
          选择：{hosname}/{department}/{date}
        </div>
        <Row
          style={{ display: "flex", flexDirection: "row", flexWrap: "wrap" }}
        >
          <Col span={6}>
            {departmentList.length ? (
              <Tree
                onSelect={(a, b) => {
                  setDepartment(b.node.title as any);
                  getScheduleRuleFun(
                    page,
                    pageSize,
                    id as string,
                    b.node.key as string
                  );
                }}
                style={{
                  marginTop: 10,
                  marginRight: 20,
                  border: "1px solid #ccc",
                }}
                treeData={departmentList}
                height={500}
                defaultExpandAll={true}
              />
            ) : (
              <div
                style={{
                  border: "1px solid #ccc",
                  overflow: "scroll",
                  height: "500px",
                  marginRight: "20px",
                }}
              />
            )}
          </Col>

          <Col span={18} style={{ marginTop: 10 }}>
            {bookingScheduleList.map((item, index) => {
              return (
                <Button
                  key={index}
                  style={{
                    display: "inline-block",
                    width: 100,
                    height: 40,
                    backgroundColor: "#eee",
                    marginRight: 10,
                    fontSize: "12px",
                    padding: 2,
                  }}
                  onClick={() => {
                    getFindScheduleListFun(
                      id as string,
                      depcode,
                      item.workDate
                    );
                    setDate(item.workDate);
                  }}
                >
                  <div>
                    {item.workDate}
                    {item.dayOfWeek}
                  </div>
                  <div>
                    {item.availableNumber}/{item.reservedNumber}
                  </div>
                </Button>
              );
            })}

            <Pagination
              onChange={(page, pageSize) => {
                setPage(page);
                setPageSize(pageSize);
                getScheduleRuleFun(page, pageSize, id as string, depcode);
              }}
              style={{ marginTop: 10 }}
              current={page}
              defaultCurrent={1}
              defaultPageSize={5}
              pageSizeOptions={["5", "10", "15"]}
              total={total}
              showTitle={true}
              showSizeChanger={true}
            />
            <Table
              rowKey="id"
              style={{ marginTop: 10 }}
              columns={columns}
              dataSource={data}
              pagination={false}
            ></Table>
            <Button
              style={{ marginTop: 10 }}
              onClick={() => {
                navigate(-1);
              }}
            >
              返回
            </Button>
          </Col>
        </Row>
      </Card>
    </>
  );
}
